<!-- 修改用户 -->
<template>
  <Modal
    class="add_form"
    v-model="modal"
    title="信息"
    :mask-closable="false"
    draggable
    sticky
    scrollable
    @on-cance="cancel"
    @on-visible-change="cancel"
    width="1000px"
  >
    <p class="title">选择导入的数据文件</p>

    <Form
      ref="formEl"
      :model="formData"
      :rules="rules"
    >
      <div class="flex_form_item">
        <FormItem
          label="数据文件"
          prop="cusfile"
        >
          <Upload
            :before-upload="handleUpload"
            action="//jsonplaceholder.typicode.com/posts/"
          >
            <Button icon="ios-cloud-upload-outline">上传用户账号数据文件</Button>
          </Upload>
        </FormItem>

        <div class="template-content">
          <div class="tip">
            <span class="require-icon">*</span>
            <p>
              (需要导入的用户账号数据Excel文件)
            </p>
          </div>
<!-- 
          <a href="../../../../public/template/user_template.xlsx" download>
            <Icon type="md-arrow-down" />
            <span> 下载模板（用户账号）</span>
          </a> -->

          <a href="#" @click="downFile">
            <Icon type="md-arrow-down" />
            <span> 下载模板（用户账号）</span>
          </a>
        </div>
      </div>
    </Form>

    <p class="title">选择导入的数据文件</p>

    <div class="tips">
      <p>第一步：上传用户账号数据的Excel文件</p>
      <p>第二步：选择Excel里的列与元数据中用户账号表（uk_user）的字段对应关系</p>
      <p>第三步：开始导入用户账号数据</p>
    </div>

    <p class="title error-tip">系统自动匹配用户账号导入字段功能，需下载模板，把用户账号数据直接导入，使用更加方便、快捷、智能</p>

    <template #footer>
      <Button @click="cancel">取消</Button>
      <Button
        type="primary"
        @click="submit"
      >立即导入</Button>
    </template>
  </Modal>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { fetchFile } from '@/api/modules/downStaticFile'
const emit = defineEmits(['cancel', 'submit'])

// 是否打开弹窗
const modal = true
// 加载
const loading = ref(true)

// 表单元素ref
const formEl = ref(null)

// 表单字段
const formData = ref({
  cusfile: ''
})

// 表单校验条件
const rules = ref({
  cusfile: [
    {
      required: true,
      message: '请上传用户账号数据文件',
      trigger: 'blur'
    }
  ]
})

/**
 * 提交表单
 */
const submit = async () => {
  let valid = await formEl.value.validate((valid, fild) =>
    valid ? valid : fild
  )
  if (!valid) return
  setTimeout(() => {
    loading.value = true
  }, 1000)
  emit('submit')
}

/**
 * 取消表单
 */
const cancel = () => {
  emit('cancel')
}

const downFile = () => {
  fetchFile('/template/user_template.xlsx', 'user_template.xlsx')
}

</script>

<style scoped lang="scss">
.template-content {
  .tip{
    display: flex;
    .require-icon{
      color: #ed4014;
    }
  }
}

.ivu-form{
  margin-bottom: 30px;
  padding-left: 30px;
}

.title{
  color:#1E90FF;
  padding: 6px 16px;
  background-color: #f2f2f2;
  margin-bottom: 16px;
}

.tips{
  margin-bottom: 30px;
  padding-left: 30px;
  >p{
    margin-bottom: 12px;
  }
}

.error-tip{
  color: red;
  background-color: #ffffe0;
}
</style>